<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>MALL</title>

    <!-- Bootstrap -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="./js/html5shiv.min.js"></script>
    <script src="./js/respond.min.js"></script>
    <![endif]-->
    <script src="../dist/js/vue.js"></script>
    <script src="../dist/js/axios.js"></script>
    <link rel="stylesheet" href="./css/common.css">
    <script src="./js/common.js"></script>
    <style>
        .categories ul {
            margin: 10px;
            padding-left: 0px;
            background-color: #fff;
        }

        .categories li {
            float: left;
            text-decoration: none;
            list-style: none;
            line-height: 60px;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.1);
            margin: 5px;
        }

        .category {
            display: inline-block;
            width: 60px;
            height: 60px;
        }

        .category:hover {
            background-color: rgba(0, 0, 0, 0.2);
            cursor: pointer;
        }

        .lastest {
            background-color: #fff;
        }

        .itemImage {
            float: left;
            list-style: none;
            width: 30%;
            margin: 1%;
            border: 1px solid #e7e7e7;
            border-radius: 4px;
            padding: 20px;
        }

        .itemImage .itemImageDesc .name {
            padding-bottom: 4px;
            margin-bottom: 4px;
            color: rgb(123, 116, 116);
        }

        .itemImage .itemImageDesc .price {
            margin-bottom: 4px;
        }

        .newGoodsTitle {
            margin: 5px;
            color: rgb(123, 116, 116);
        }

        .newGoodsTitle .more:hover {
            color: rgba(0, 0, 0, 0.7);
            cursor: pointer;
        }

        .newGoodsTitle .more:active {
            color: rgba(0, 0, 0, 1);
        }


        div.slider {
            background-color: #fff;
            padding: 30px;
        }

        .row {
            padding: 0 30px;
        }

        .price {
            color: red;
            height: 20px;
        }

        .name {
            font-weight: bold;
            font-size: 16px;
            height: 80px;
            /*color: #fff;*/
        }
    </style>
</head>
<body>
<div id="app">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="/views/client/index.html">MALL</a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">MALL</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <!--                <li class=""><a href="#">Link <span class="sr-only">(current)</span></a></li>-->
                    <!--                <li><a href="#">Link</a></li>-->

                </ul>
                <form class="navbar-form navbar-left">
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="./register.html" v-if="currentUser.id===undefined">注册</a></li>
                    <li><a href="./login.html" v-if="currentUser.id===undefined">登录</a></li>
                    <li class="dropdown" v-if="currentUser.id!==undefined">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">
                            <img :src="currentUser.avatar" class="img-circle" style="width: 30px;height: 30px;" alt="">
                            {{currentUser.username}}
                            <span class="caret"></span></a>
                        <!--                        2->表示用户-->
                        <ul class="dropdown-menu" v-if="currentUser.role===2">
                            <li><a href="./info.html">我的信息</a></li>
                            <li><a href="./cart.html">我的购物车</a></li>
                            <li><a href="./order.html">我的订单</a></li>

                            <li role="separator" class="divider"></li>
                            <li><a @click="this.clientLogout()" href="#">退出</a></li>
                        </ul>

                        <!--                        3->表示商家-->
                        <ul class="dropdown-menu" v-if="currentUser.role===3">
                            <li><a href="/views/client/store/info.html">我的信息</a></li>
                            <li><a href="./store/publishGoods.html">发布商品</a></li>
                            <li><a href="/views/client/store/myGoods.html">我发布的商品</a></li>
                            <li><a href="./store/orders.html">我收到的订单</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a @click="this.clientLogout()" href="#">退出</a></li>
                        </ul>

                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="container">
        <div class="search row" style="margin:10px 0;">
            <div class="form-group">
                <input type="text" style="height: 40px;" class="form-control" placeholder="请输入关键字"/>
            </div>
        </div>
        <div class="slider row">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item" :class="index===0?'active':''" v-for="(item,index) of ads">
                        <a :href="item.link" target="_blank">
                            <img :src="item.url" :alt="item.name">
                        </a>
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="row categories">
            <ul class="clearfix">
                <li class="" v-for="item of categories" :key="item.id">
                    <a href="#" class="category">
                         <span class="glyphicon glyphicon-info-sign">
                        <p>{{item.name}}</p>
                    </span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="lastest row">
            <div class="newGoodsTitle">
                <span class="more" style="float: right;display: inline-block;padding:2px;">更多最新商品 ></span>
                <h3 class="title">最新上架</h3>
            </div>
            <div class="row">
                <div class="col-sm-6 col-md-4"   v-for="item of newGoods.list">
                    <a :href="'/views/client/goodsDetail.html?goodsId='+item.id">
                        <div class="thumbnail">
                            <img style="height: 200px;" class="img-responsive" :src="item.primaryImage" alt="">
                            <div class="caption">
                                <h3 class="name">{{item.name}}</h3>
                                <p class="price">￥{{item.price}}</p>
                            </div>
                        </div>
                    </a>

                </div>
            </div>


        </div>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li v-if="newGoods.hasPreviousPage">
                        <span @click="this.retrieveIndexGoods(newGoods.prePage,newGoods.pageSize)"
                              aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </span>
                </li>
                <li v-for="(item,index) of newGoods.navigatepageNums">
                        <span style="cursor: pointer;"
                              @click="this.retrieveIndexGoods(item,newGoods.pageSize)">{{item}}</span>
                </li>

                <li v-if="newGoods.hasNextPage">
                        <span @click="this.retrieveIndexGoods(newGoods.nextPage,newGoods.pageSize)"
                              aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </span>
                </li>
            </ul>
        </nav>
    </div>
</div>

<footer class="main-footer">
    <strong>Copyright &copy; 2020 <a href="">MALL</a></strong>
    All rights reserved.
    <div class="float-right d-none d-sm-inline-block">
        <b>Version</b> v1.0.0
    </div>
</footer>
</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="./js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./js/bootstrap.min.js"></script>
<script src=""></script>
<script>
    var retrieveUserByToken = function () {
        console.log(localStorage.getItem("accessToken"));
        axios.get("/common/retrieveUserByToken", {
            headers: {
                Authorization: localStorage.getItem("accessToken") != null ? "Bearer " + localStorage.getItem("accessToken") : null
            }
        })
            .then(function (response) {
                console.log(response);
                if (response.data.code === 200) {
                    this.app.currentUser = response.data.data;
                }
            }).catch(function (err) {
            console.log(err);
        })
    }
    var retrieveAllCategories = function () {
        axios.get("/client/category/listAll")
            .then(function (response) {
                console.log(response.data);
                if (response.data.code === 200) {
                    this.app.categories = response.data.data;
                }
            }).catch(function (err) {
            console.log(err);
        });
    }
    var retrieveIndexGoods = function (page, pageSize) {
        axios.get("/client/goods/listSearch?page=" + page + "&pageSize=" + pageSize, {
            headers: {
                Authorization: localStorage.getItem("accessToken") != null ? "Bearer " + localStorage.getItem("accessToken") : ""
            }
        })
            .then(function (response) {
                if (response.data.code === 200) {
                    this.app.newGoods = response.data.data;
                }
                console.log(response);
            })
            .catch(function (err) {
                console.log(err);
            })
    }


    var app = new Vue({
        el: "#app",
        data: {
            categories: [],
            newGoods: {
                endRow: 7,
                firstPage: 1,
                hasNextPage: false,
                hasPreviousPage: false,
                isFirstPage: true,
                isLastPage: true,
                lastPage: 1,
                list: [],
                navigateFirstPage: 1,
                navigateLastPage: 1,
                navigatePages: 8,
                navigatepageNums: [],
                nextPage: 0,
                pageNum: 1,
                pageSize: 12,
                pages: 1,
                prePage: 0,
                size: 7,
                startRow: 1,
                total: 7,
            },
            currentUser: {},
            scrollTop: 0,
            ads: []
        },
        methods: {
            handleScroll: function () {

            }
        },
        mounted: function () {
            retrieveAllCategories();
            retrieveUserByToken();
            retrieveIndexGoods(1, this.newGoods.pageSize);
            retrieveAd(1);
        },
    });

</script>

</html>